<template>
  <!-- 商品分类第一种布局样式 -->
  <view class='productSort copy-data' :style="{height:pageHeight}">
    <view :style="{paddingTop: sysHeight + 'px'}" class="text--w111-999 header-wrap">
      <view v-if="false" class="h-80 px-32 flex-y-center">
          <!-- #ifdef MP -->
          <view class="flex-1 h-58 flex-y-center rd-30rpx bg--w111-fff px-32" @tap="goSearch">
          <!-- #endif -->
          <!-- #ifndef MP -->
          <view class="w-full h-58 flex-y-center rd-30rpx bg--w111-fff px-32" @tap="goSearch">
            <!-- #endif -->
            <text class="iconfont icon-ic_search fs-28"></text>
            <text class="fs-24 pl-18">请输入商品名称</text>
          </view>
          <!-- 胶囊占据的位置 -->
          <!-- #ifdef MP -->
          <!--				<view class="ml-12" :style="'width:'+getHeight.barWidth+'px'"></view>-->
          <!-- #endif -->
        </view>
      </view>
      <!--    顶部搜索占位区  -->
      <!--    <view class="h-100px" :style="{100 + 'px'}"></view>-->
      <view class="scroll-box">
        <!--  左侧：1级品牌 -->
        <view class='aside'>
          <scroll-view scroll-y="true" scroll-with-animation='true' :style="[asideHeights]">
            <view class='one-cate-box item w-full acea-row row-center-wrapper' :class='index==navActive?"on":""'
                  v-for="(item,index) in brandList" :key="index"  @click='tap(index,"b"+index)'>
              <text>{{item.brand_name}}</text>
            </view>
            <!-- #ifdef APP-PLUS -->
            <view class="item" v-if="isFooter"></view>
            <!-- #endif -->
          </scroll-view>
        </view>
        <!-- 右侧：2级品牌 -->
        <view class="conter relative" >
          <view class="mb-32 second-title">
            {{brandList[navActive].brand_name}}
          </view>
          <scroll-view scroll-y="true" scroll-with-animation='true'
                       class="conterScroll" :style="[conterHeights]" v-if="brandList.length">
            <block>
              <view class='listw' v-for="(item,index) in brandList" v-if="navActive == index">
                <view class="card mb-20" v-if="item.children && item.children.length">
<!--                  								<view class="title mb-32">-->
<!--                  									<text>{{item.cate_name}} </text>-->
<!--                  								</view>-->
                  <view class="grid_box">
                    <block v-for="(itemn,indexn) in item.children" :key="indexn">
                      <view @click="goGoods(itemn,item.id)" class='item acea-row row-column row-middle'>
                        <easy-loadimage
                            mode="widthFix"
                            :image-src="itemn.brand_img"
                            width="150rpx"
                            height="150rpx"
                            borderRadius="12rpx"></easy-loadimage>
                        <view class='cate_name line1'>{{itemn.brand_name}}</view>
                      </view>
                    </block>
                  </view>
                </view>
                <view v-else>
                  <emptyPage title="暂无商品，去看点别的吧～" ></emptyPage>
                </view>
              </view>
            </block>
            <view :style='"height:"+(height-heightDiv)+"rpx;"'></view>
          </scroll-view>
        </view>
      </view>
    </view>
</template>

<script>
let sysHeight = uni.getSystemInfoSync().statusBarHeight;
let windowBottom = uni.getSystemInfoSync().windowBottom;
import {getBrandCate, getCategoryList} from '@/api/store.js';
import { getCategoryVersion } from '@/api/api.js';
import {mapState,mapGetters} from "vuex"
import emptyPage from '@/components/emptyPage.vue';
const app = getApp();
export default {
  props: {
    level:{
      type:Number,
      default:3
    },
    isFooter:{
      type:Boolean,
      default:false
    },
    pdHeight:{
      type:Number,
      default:0
    },
    // 组件使用场景：默认空-分类页面，storeAdd则为门店选择商品
    from:{
      type:String,
      default:''
    }
  },
  components: {
    emptyPage
  },
  data() {
    return {
      navlist: [],
      // brandList: [],
      navActive: 0,
      number: "",
      height: 0,
      heightDiv: 0,
      hightArr: [],
      toView: "",
      tabbarH: 0,
      footH: 0,
      windowHeight: 0,
      pageHeight: '100%',
      sysHeight: sysHeight,
      // #ifdef APP-PLUS
      pageHeight: app.globalData.windowHeight,
      // #endif
      footerStatus: false,
      lock: false,
      tabClick:0,
      showCateDrawer: false,
      getHeight: this.$util.getWXStatusHeight(),

      brandList:[]
    }
  },
  computed: {
    ...mapState({
      cartNum: state => state.indexData.cartNum
    }),
    asideHeights(){
      let H = `calc(100% - ${this.pdHeight*2 + 96}rpx - env(safe-area-inset-bottom))`
      return{
        //#ifdef H5
        height: this.isFooter?H:'100%'
        //#endif
        // #ifdef MP || APP-PLUS
        height: this.isFooter?H:'100%'
        //#endif
      }
    },
    conterHeights(){
      let H = `calc(100% - ${this.pdHeight*2 + 192}rpx - env(safe-area-inset-bottom))`
      let H2 = `calc(100% - ${this.pdHeight*2 + 192}rpx - env(safe-area-inset-bottom))`
      let HZ = `calc(100% - 96rpx - env(safe-area-inset-bottom))`
      return{
        //#ifdef H5
        height: this.isFooter?H:HZ
        //#endif
        // #ifdef MP || APP-PLUS
        height: this.isFooter?H2:HZ
        //#endif
      }
    },
    imageShow(){
      let obj = this.brandList.length && this.brandList[this.navActive].children.length && this.brandList[this.navActive].children[this.tabClick] &&
          this.brandList[this.navActive].children[this.tabClick].hasOwnProperty("children")
      return !obj
    }
  },
  // watch:{
  // 	cartNum(){
  // 		this.getCartList(1);
  // 	}
  // },
  mounted() {
    let that = this
    // this.getAllCategory();
    // #ifdef H5
    uni.getSystemInfo({
      success: function(res) {
        that.pageHeight = res.windowHeight + 'px'
      }
    });
    // #endif
    this.getBrandCate()
  },
  methods: {
    // 品牌分类
    getBrandCate(){
      getBrandCate().then(res=>{
        this.brandList = res.data
      })
    },
    // 点击二级子品牌
    goGoods(item,pid){
      let ids=pid+','+item.id

      // this.$store.commit('setSelectedBrandIds', ids);

      // 跳转三级品牌独立页面
      if(item.children && item.children.length > 0){
        this.$store.commit('setSelectedBrandSecond', item.children);
        uni.navigateTo({
          url: `/pages/admin/goods/brandCateEnd?title=${item.brand_name}&ids=${ids}`
        })
      }
      // 跳转商品页
      else{
        uni.navigateTo({
          url: `/pages/admin/goods/skuList?title=${item.brand_name}&ids=${ids}`
        })
      }
    },
    footHeight(data) {
      this.footH = data
    },
    closeCateDrawer() {
      this.showCateDrawer = false;
    },
    openCateDrawer() {
      this.showCateDrawer = true;
    },
    // 导航栏点击
    longClick(index, item) {
      // console.log('tabClick',this.tabClick)
      this.tabClick = index; //设置导航点击了哪一个
      // this.sid = this.categoryErList[index].id;
      // this.page = 1;
      // this.loadend = false;
      // this.tempArr = [];
      // this.productslist();
    },
    infoScroll: function() {
      let that = this;
      let len = that.brandList.length;
      this.number = that.brandList[len - 1].children.length;
      let height = 0;
      let hightArr = [];
      //设置商品列表高度
      let query = uni.createSelectorQuery().in(this);
      query.select(".conter").boundingClientRect();
      query.exec(function(res){
        height = res[0].height;
      })
      for (let i = 0; i < len; i++) {
        //获取元素所在位置
        let query = uni.createSelectorQuery().in(this);
        let idView = "#b" + i;
        query.select(idView).boundingClientRect();
        query.exec(function(res) {
          let top = res[0]?.top;
          that.hightArr.push(top);
          if(len == that.hightArr.length){
            //设置转化比例
            uni.getSystemInfo({
              success: function(res) {
                let per = (750 / res.windowWidth);
                that.height = height * per;
                that.heightDiv = (that.hightArr[that.hightArr.length-1] - that.hightArr[that.hightArr.length-2])*per;
              },
            });
          }
        });
      };
    },
    tap: function(index, id) {
      this.toView = id;
      this.navActive = index;
      this.tabClick = 0;
      this.$set(this, 'lock', true);
    },
    // getAllCategory() {
    //   getCategoryList().then(res => {
    //     this.brandList = res.data;
    //     if(this.level == 2){
    //       this.$nextTick(res => {
    //         this.infoScroll();
    //       })
    //     }
    //   })
    // },
    scroll: function(e) {
      let scrollTop = e.detail.scrollTop;
      let scrollArr = this.hightArr;
      if (this.lock) {
        this.$set(this, 'lock', false);
        return;
      }
      for (let i = 0; i < scrollArr.length; i++) {
        if (scrollTop >= 0 && scrollTop < scrollArr[1] - scrollArr[0]) {
          this.navActive = 0
        } else if (scrollTop >= scrollArr[i] - scrollArr[0] && scrollTop < scrollArr[i + 1] - scrollArr[
            0]) {
          this.navActive = i
        } else if (scrollTop >= scrollArr[scrollArr.length - 1] - scrollArr[0]) {
          this.navActive = scrollArr.length - 1
        }
      }
      uni.$emit('scroll');
    },
    searchSubmitValue: function(e) {
      if (this.$util.trim(e.detail.value).length > 0)
        uni.navigateTo({
          url: '/pages/goods/goods_list/index?searchValue=' + e.detail.value
        })
      else
        return this.$util.Tips({
          title: '请填写要搜索的产品信息'
        });
    },
    goSearch() {
      uni.navigateTo({
        url: '/pages/goods/goods_list/index?from='+this.from
      })
    },
    goPage(type, url){
      if(type == 1){
        uni.navigateTo({
          url
        })
      }else if(type == 2){
        uni.switchTab({
          url
        })
      }else if(type == 3){
        uni.navigateBack();
      }

    },
  },
}
</script>
<style>
page {
  /* height: 100%; */
  background: #f5f5f5;
}
</style>
<style scoped lang="scss">
.bntCon{
  position: relative;
  &:before{
    position: absolute;
    content: '';
    width: 6rpx;
    height: 80rpx;
    background: radial-gradient( rgba(0,0,0,0.082) 0%, rgba(0,0,0,0) 100%);
    left:-22rpx;
  }
}

/deep/uni-scroll-view{
  padding-bottom: 0!important;
}
.height-add {
  height: 100%;
}
.sys-title {
  z-index: 10;
  position: relative;
  height: 40px;
  line-height: 40px;
  font-size: 34rpx;
  color: #333;
  text-align: center;
}
.productSort {
  display: flex;
  flex-direction: column;
  //#ifdef MP
  height: calc(100vh - var(--window-top)) !important;
  //#endif
  //#ifndef MP
  height: 100vh
  //#endif
}

.productSort .header {
  width: 100%;
  height: 96rpx;
  background-color: #f5f5f5;
}

.productSort .header .input {
  width: 700rpx;
  height: 60rpx;
  background-color: #fff;
  border-radius: 50rpx;
  box-sizing: border-box;
  padding: 0 25rpx;
}

.productSort .header .input .iconfont {
  font-size: 35rpx;
  color: #555;
}

.productSort .header .input .placeholder {
  color: #999;
}

.productSort .header .input input {
  font-size: 26rpx;
  height: 100%;
  width: 597rpx;
}

.productSort .scroll-box {
  flex: 1;
  overflow: hidden;
  display: flex;
}

// #ifndef MP
uni-scroll-view {
  padding-bottom: 100rpx;
}

// #endif

.productSort .aside {
  width: 168rpx;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
  border-top-right-radius: 24rpx;
  .one-cate-box{
    position: relative;
    .one-cate{
      position: absolute;
      top: 10rpx;
      left: 0;
      z-index: 10;
      font-size: 20rpx;
      color: var(--view-theme);
      font-style: italic;
      .sub-pic{
        width: 60rpx;
        max-height: 30rpx;
      }
    }
  }
  .two-cate-box{
    .tow-cate-1{
      padding-top: 30rpx;
    }
  }
}

.productSort .aside .item {
  height: 96rpx;
  width: 100%;
  font-size: 24rpx;
  color: #666;
  text-align: center;
  padding: 10rpx;
  word-break: break-all;
  display: flex;
  justify-content: center;
  align-items: center;
}

.productSort .aside .item.on {
  background-color: #f5f5f5;
  width: 100%;
  color: var(--view-theme);
  font-weight: 500;
}

.productSort .conter {
  flex: 1;
  height: 100%;
  overflow: hidden;
  padding: 0 20rpx;
  position: relative;
  background-color: #f5f5f5;
  .second-title{
    padding-top: 30rpx;
  }
}
.productSort .conter .banner{
  width: 100%;
  height: 160rpx;
  border-radius: 16rpx;
  margin-top: 20rpx;
}
.productSort .conter .card{
  width: 100%;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx 24rpx;
}
.productSort .conter .card .title{
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  line-height: 40rpx;
}
.productSort .conter .card .iconfont{
  font-size: 24rpx;
}
.productSort .conter .card .grid_box{
  //display: grid;
  //grid-template-columns: repeat(3, 1fr);
  //grid-template-rows: auto;
  //grid-row-gap: 32rpx;
  //grid-column-gap: 50rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20rpx;
  .cate_name{
    font-size: 24rpx;
    color: #333;
    line-height: 34rpx;
    margin-top: 12rpx;
    text-align: center;
    width: 140rpx;
  }
  .item{
    margin-bottom: 36rpx;
  }
}
.cate_active {
  color: var(--view-theme);
  background: var(--view-minorColorT);
  border: 1px solid var(--view-theme);
}
.pl-30 {
  padding-left: 30rpx;
}

</style>
